body {
    line-height: 22px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-variant: tabular-nums;
    font-feature-settings: "tnum";
    color: var(--el-text-color-primary);
    background-color: #f4f5f9;
}

a {
    text-decoration: none;
}

#app {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
}

:root {
    --el-menu-hover-bg-color: var(--el-color-primary);

    --el-color-danger: #ff6759;
    --el-color-success: #27ae60;
    --el-color-success-light-3: #47ba73;
    --el-color-success-light-5: #6bc78b;
    --el-color-success-light-7: #94d4a8;
    --el-color-success-light-8: #c1e0ca;
    --el-color-success-light-9: #dfede2;
    --el-color-success-dark-2: #178749;
    --el-color-warning: #ff9500;
    --el-color-warning-light-3: #ffad29;
    --el-color-warning-light-5: #ffc252;
    --el-color-warning-light-7: #ffd57a;
    --el-color-warning-light-8: #ffe5a3;
    --el-color-warning-light-9: #fff9e6;
    --el-color-warning-dark-2: #d97700;
    --el-color-error: #ff3b30;
    --el-color-error-light-3: #ff6759;
    --el-color-error-light-5: #ff9182;
    --el-color-error-light-7: #ffb7ab;
    --el-color-error-light-8: #ffdcd4;
    --el-color-error-light-9: #fff3f0;
    --el-color-error-dark-2: #d9211e;

    --el-text-color-primary: rgba(0, 0, 0, 0.65);
    --el-text-color-regular: rgba(0, 0, 0, 0.85);

    --el-component-size-large: 40px;
    --el-component-size: 36px;
    --el-component-size-small: 32px;
}

.el-button {
    --el-button-size: 36px;
    height: var(--el-button-size);
    --el-button-hover-bg-color: var(--el-color-white);
    &.el-button--primary {
        --el-button-hover-bg-color: var(--el-color-primary-light-3);
    }
    &.el-button--success {
        --el-button-hover-bg-color: var(--el-color-success-light-3);
    }
    &.el-button--info {
        --el-button-hover-bg-color: var(--el-color-info-light-3);
    }
    &.el-button--warning {
        --el-button-hover-bg-color: var(--el-color-warning-light-3);
    }
    &.el-button--danger {
        --el-button-hover-bg-color: var(--el-color-danger-light-3);
    }
    &.el-button--large {
        --el-button-size: 40px;
    }
    &.el-button--small {
        --el-button-size: 32px;
    }
    &.is-circle {
        width: var(--el-button-size);
    }
}

.el-menu {
    --el-menu-item-height: 48px;
    .el-menu-item,
    .el-sub-menu__title {
        &.is-active,
        &:not(.is-disabled):hover {
            color: #fff;
            background: var(--el-menu-hover-bg-color);
        }
    }
    .el-sub-menu .el-icon {
        font-size: 16px;
    }
    &.el-menu--collapse {
        --el-menu-base-level-padding: 12px;
    }
}

.el-switch {
    .el-switch__core {
        min-width: 44px;
        height: 24px;
        border-radius: 12px;
        .el-switch__action {
            width: 20px;
            height: 20px;
        }
    }
    &.el-switch--large {
        .el-switch__core {
            min-width: 50px;
            height: 28px;
            border-radius: 14px;
            .el-switch__action {
                width: 24px;
                height: 24px;
            }
        }
    }
    &.el-switch--small {
        .el-switch__core {
            min-width: 28px;
            height: 16px;
            border-radius: 8px;
            .el-switch__action {
                width: 12px;
                height: 12px;
            }
        }
    }
    &.is-checked {
        .el-switch__core {
            .el-switch__action {
                left: calc(100% - 21px);
            }
        }
        &.el-switch--large {
            .el-switch__core {
                .el-switch__action {
                    left: calc(100% - 25px);
                }
            }
        }
        &.el-switch--small {
            .el-switch__core {
                .el-switch__action {
                    left: calc(100% - 13px);
                }
            }
        }
    }
}

.el-select-v2--small {
    .el-select-v2__wrapper {
        .el-select-v2__combobox-input {
            height: var(--el-input-inner-height);
            margin: 0;
        }
    }
}

.el-pagination {
    --el-pagination-border-radius: 4px;
    --el-pagination-button-width: 36px;
    --el-pagination-button-height: 36px;
    --el-pagination-font-size-small: 14px;
    --el-pagination-button-width-small: 32px;
    --el-pagination-button-height-small: 32px;
    --el-pagination-item-gap: 8px;

    button {
        box-shadow: 0 0 0 1px var(--el-button-border-color, var(--el-border-color)) inset;
        margin-left: var(--el-pagination-item-gap);
    }

    .el-pager {
        li {
            margin-left: var(--el-pagination-item-gap);
            &.number {
                box-shadow: 0 0 0 1px var(--el-button-border-color, var(--el-border-color)) inset;
            }
            &:hover:not(.more),
            &.is-active {
                box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-border-color)) inset;
            }
        }
    }
}

.el-drawer {
    --el-drawer-padding-primary: 24px;
    .el-drawer__header {
        line-height: 22px;
        font-size: 16px;
        font-weight: 500;
        color: var(--el-text-color-regular);
        border-bottom: 1px solid rgba(#000, 0.06);
        padding: 16px var(--el-drawer-padding-primary);
        margin: 0;
    }
}

.el-checkbox {
    .el-checkbox__input.is-checked + .el-checkbox__label {
        color: inherit;
    }
}
